<script lang="ts">
import { TeleportAntdModalFooter } from '~comp/antd-assist';
import { useList } from '~comp-b/global-popups/invitation/hooks';
import ShareBtnBar from './ShareBtnBar.vue';


export const invitedShare = useAntdModal(
  // eslint-disable-next-line import/no-self-import
  defineAsyncComponent(() => import('./InvitedShare.vue')),
  {
    title: computed(() => $t('rlNEAfM5lo0q5m0Vw2Df')),
    wrapClassName: 'ant-cover__Modal-drawer',
    width: 390,
    centered: true,
    footer: null,
  },
);
</script>

<script lang="ts" setup>
const appStore = useAppStore();
const userStore = useUserStore();
const { symbol, withdrawAmount, currency } = useList();
const shareUrl = computed(() => {
  const url = new URL(`${appStore.handshake?.domain.www ?? location.origin}/share/site`);
  url.searchParams.append('share_type', 'InviteSpinDetail');
  url.searchParams.append('ic', userStore.userInfo?.referral_code ?? '');
  url.searchParams.append('i', 'i');
  return url.toString();
});
const text = `\n${$t('mchStW6jgTTjF75T3eAeu', { platform: appStore.appName, symbol: symbol.value[currency.value], amount: withdrawAmount.value })}\n`;
</script>

<template>
  <div bodyClass="max-h-60vh overflow-y-auto">
    <div class="border-b-(1px slate-600 dashed) pb-3">
      <p class="text-3.5 text-sys-text-body leading-normal">
        {{ $t('ml8wU5Fr5OoXb9EdZynme') }}
      </p>
    </div>

    <div class="share-win__details-wrap">
      <div class="pt-3 text-sys-text-body leading-normal">
        {{ $t('egsybnpy4DtKlC53Cqabr') }}
      </div>
      <div data-copy-title class="mx-1 my-3 border-(1px slate-400 rd-2 solid) p-3 text-3.5 text-sys-text-body leading-normal">
        {{ shareUrl }}
        <TCopy :source="shareUrl" trigger="div[data-copy-title]" class="!justify-end" />
      </div>
    </div>

    <div class="relative m-[0_auto] w-85">
      <img class="w-full rounded-2" :src="appStore.joinCdnPath('/share/invitespin.png')">
    </div>
    <TeleportAntdModalFooter footerClass="!max-w-none !p-0 !mt-1">
      <ShareBtnBar
        class="mobile:(rounded-b-4)"
        :shareUrl="shareUrl" :text="text"
      />
    </TeleportAntdModalFooter>
  </div>
</template>
